<template>
  <BaseLayout>
    <template v-slot:main-left>
      <Institution />
    </template>
    <template v-slot:main-button>
      <mainButton
        @toMainSearch="search"
        @toMainSearchReset="reset"
        :main-button="mainButton"
      />
    </template>
    <template v-slot:search-info>
      <searchMain
        size="mini"
        :label-width="labelWidth"
        ref="searchMain"
        :model="formData"
        :rules="searchRules"
        :itemList="formItemList"
      />
      <el-divider />
    </template>
    <template v-slot:table-main>
      <common-table
        :data="infoList"
        border
        :columns-item="columns"
        :title="infoTitle"
        :loading="false"
        :item-list="itemList"
        @checkbox-change="selectChangeEvent"
      />
    </template>
    <template v-slot:table-member>
      <common-table
        :data="testList"
        border
        :columns-item="testColumns"
        :title="testTitle"
        @checkbox-change="selectChangeEvent"
      />
    </template>
  </BaseLayout>
  <!-- <div class="health-test">
    <div class="left">
      <institution />
    </div>
    <el-card class="right">
      <div>
        <el-row>
          <el-col>
            <el-button icon="el-icon-circle-plus-outline" type="primary" @click="submitForm('ruleForm')">
              新增档案</el-button>
          </el-col>
        </el-row>
        <el-form ref="ruleForm" :inline="true" :rules="rules" :model="formdata" label-width="86px">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="formdata.name" style="width:'50px'" />
          </el-form-item>
          <el-form-item label="身份证号" prop="identityNumber">
            <el-input v-model="formdata.identityNumber" />
          </el-form-item>
          <el-form-item label="是否体检" prop="isTest">
            <el-select v-model="formdata.isTest" placeholder="请选择">
              <el-option v-for="item in isTestOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="审核状态" prop="approvalStatu">
            <el-select v-model="formdata.approvalStatu" placeholder="请选择">
              <el-option v-for="item in approvalStatuOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="年龄段" prop="age">
            <el-input v-model="formdata.age" />
          </el-form-item>
          <el-form-item label="建档日期" prop="createDate">
            <el-date-picker
              v-model="formdata.createDate"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
            />
          </el-form-item>
          <el-form-item label="年度/日期">
            <el-date-picker
              v-model="formdata.createDateOne"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
            />
          </el-form-item>
          <el-form-item label="年度范围">
            <el-date-picker
              v-model="formdata.createDateTow"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
            />
          </el-form-item>
          <el-form-item label="慢病查询" prop="query">
            <el-input v-model="formdata.query" />
          </el-form-item>
          <el-form-item label="排序查询" prop="sitoQuery">
            <el-input v-model="formdata.sitoQuery" />
          </el-form-item>
          <el-form-item label="体检日期">
            <el-date-picker
              v-model="formdata.createDateThree"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
            />
          </el-form-item>
          <el-form-item label="体检次数">
            <el-input v-model="formdata.test" />
          </el-form-item>
        </el-form>
      </div>
      <el-divider />
      <div class="info">
        <div class="info-table">
          <span>老年人信息列表</span>
          <div class="table">
            <el-table
              border
              stripe
              :data="infoList"
              height="100%"
              highlight-current-row
              @row-click="(row)=>{testList = row.testList}"
            >
              <el-table-column type="index" width="50" />
              <el-table-column type="selection" width="55" />
              <el-table-column label="姓名" prop="name" />
              <el-table-column label="性别" prop="sex" />
              <el-table-column label="年龄" prop="age" />
              <el-table-column label="出生日期" prop="birthdata" width="100" />
              <el-table-column label="身份证号" prop="identityNumber" width="200" />
              <el-table-column label="本人电话号码" prop="phonenumber" width="150" />
              <el-table-column label="联系人姓名" prop="name" width="100" />
              <el-table-column label="联系人电话" prop="phonenumber" width="150" />
              <el-table-column label="现住地址" prop="nowAddress" />
              <el-table-column label="服务人员" prop="servicePersonnel" />
              <el-table-column label="责任医生" prop="responsibleDoctor" />
              <el-table-column label="家庭档案号" prop="number" width="120" />
              <el-table-column label="个人健康档案号" prop="number" width="150" />
              <el-table-column label="总体检次数" prop="test" width="100" />
            </el-table>
          </div>
        </div>
        <div class="personnel-table">
          <span>健康体检信息列表</span>
          <div class="table">
            <el-table border stripe height="100%" :data="testList" @row-click="dialogVisible = true">
              <el-table-column label="体检日期" prop="createDate" width="100px" />
              <el-table-column label="责任医生" prop="responsibleDoctor" />
              <el-table-column label="健康评价" prop="healthEvaluation" />
              <el-table-column label="审核状态" prop="approvalStatu" />
              <el-table-column label="检验报告引入" prop="introduce" width="120px" />
            </el-table>
          </div>
        </div>
      </div>
    </el-card>
    <health-info :dialog-visible.sync="dialogVisible" />
  </div> -->
</template>

<script>
import BaseLayout from "@/components/Layout/base.vue"
import Institution from "@/components/Trees/Institution.vue"
import mainButton from "@/components/CommonButtons/MainButton.vue"
import searchMain from "@/components/CommonForm/index.vue"
import CommonTable from "@/components/CommonTable/index.vue"
// import Institution from "@/components/Trees/Institution.vue"
// import HealthInfo from "@/views/dialog/health-info.vue"
import {
  infoList,
  testList,
  sexs,
  fileStatusType,
  liveType,
  dataSource,
  helpPoor,
  peopleSigns,
  publicSigns,
  addressList,
  information,
  dataProps,
  searchHandle
} from "@/simdata/healthData.js"
export default {
  components: {
    BaseLayout,
    Institution,
    mainButton,
    searchMain,
    CommonTable
  },
  data() {
    return {
      // 配置标题显示图标颜色
      itemList: [
        {
          label: "高",
          colour: "#66FFFF"
        },
        {
          label: "糖",
          colour: "#f3daf9"
        },
        {
          label: "精",
          colour: "#FFCC99"
        },
        {
          label: "贫",
          colour: "#BF924C"
        },
        {
          label: "新",
          colour: "#3D9F54"
        },
        {
          label: "结",
          colour: "#87FE03"
        }
      ],
      // 配置常用按钮
      mainButton: [
        {
          label: "审核通过",
          icon: "el-icon-circle-plus-outline",
          type: "primary",
          handle: () => this.addHandle()
        },
        {
          label: "审核未通过",
          icon: "el-icon-edit-outline",
          type: "success",
          handle: () => {
            console.log("点击了")
          }
        },
        {
          label: "查看审核意见",
          icon: "el-icon-edit-outline",
          type: "success",
          handle: () => {
            console.log("点击了")
          }
        },
        {
          label: "导出Excel",
          icon: "el-icon-edit-outline",
          type: "success",
          handle: () => {
            console.log("点击了")
          }
        }
      ],
      // 查询表单
      formData: {
        Address_value: [], // 常用地址
        keyword: "", // 个人信息项 字段
        keyValue: "", // 值
        createDate: null, // 建档日期 开始
        endDate: null, // 结束日期
        fileStatus: null // 档案状态
      },
      // label的宽度
      labelWidth: "100px",
      // 验证
      searchRules: {
        Address_value: [
          { required: true, message: "请选择常用地址", trigger: "change" }
        ]
      },
      // 配置search label表单
      formItemList: [
        {
          type: "Cascader",
          label: "常用地址",
          prop: "Address_value",
          width: "120px",
          options: addressList,
          props: dataProps,
          change: () => this.handleChange(),
          placeholder: "请选择..."
        },
        {
          type: "Select",
          label: "查询项目", // 个人信息查询项目
          prop: "keyword",
          width: "120px",
          options: information,
          props: dataProps,
          change: row => "",
          placeholder: "请选择..."
        },
        {
          type: "Input",
          label: "项目值",
          prop: "keyValue",
          width: "120px",
          placeholder: ""
        },
        {
          type: "data",
          label: "建档日期",
          prop: "createDate",
          width: "140px",
          placeholder: "请选择..."
        },
        {
          type: "data",
          label: "至",
          prop: "endDate",
          width: "140px",
          placeholder: "请选择..."
        },
        {
          type: "Select",
          label: "档案状态",
          prop: "fileStatus",
          width: "120px",
          options: fileStatusType,
          props: dataProps,
          change: row => "",
          placeholder: "请选择..."
        }
      ],
      // 所有列表数据
      infoTitle: "人员基本信息列表",
      testTitle: "【数据审核列表】",
      infoList: infoList,
      testList: testList,
      // 配置显示的label标签
      columns: [
        { prop: "name", label: "姓名", width: "100" },
        {
          prop: "sex",
          label: "性别",
          width: "68",
          type: "sex",
          option: sexs
        },
        { prop: "age", label: "年龄", width: "80" },
        { prop: "birthdata", label: "出生日期", width: "100" },
        { prop: "identityNumber", label: "身份证号", width: "180" },
        { prop: "phonenumber", label: "本人电话号码", width: "150" },
        { prop: "linkName", label: "联系人姓名", width: "100" },
        { prop: "linkNumber", label: "联系人电话", width: "150" },
        { prop: "nowAddress", label: "现住地址", width: "150" },
        {
          prop: "isSign",
          label: "是否签约",
          width: "80",
          type: "isSign",
          callback: row => {
            let text = ""
            switch (row.isSign) {
              case 1:
                text = "已签约"
                break
              case 2:
                text = "未签约"
                break
              default:
                text = "其他"
            }
            return text
          }
        }, //
        { prop: "responsibleDoctor", label: "责任医生", width: "100" },
        {
          prop: "isHome",
          label: "家庭信息",
          width: "80",
          type: "isHome",
          callback: row => {
            let text = ""
            switch (row.isHome) {
              case 1:
                text = "有"
                break
              case 2:
                text = "无"
                break
              default:
                text = "其他"
            }
            return text
          }
        }, //
        { prop: "creatDoctor", label: "建档医生", width: "100" },
        { prop: "createDate", label: "建档日期", width: "100" },
        { prop: "myNumber", label: "个人健康档案号", width: "150" },
        { prop: "number", label: "家庭档案号", width: "150" },
        {
          prop: "isComplete",
          label: "信息是否完整",
          width: "120",
          type: "isComplete",
          callback: row => {
            let text = ""
            switch (row.isComplete) {
              case 1:
                text = "完整"
                break
              case 2:
                text = "不完整"
                break
              default:
                text = "其他"
            }
            return text
          }
        },
        {
          prop: "isLibrary",
          label: "人口库标记",
          width: "100",
          type: "isLibrary",
          callback: row => {
            let text = ""
            switch (row.isLibrary) {
              case 1:
                text = "是"
                break
              case 2:
                text = "否"
                break
              default:
                text = "其他"
            }
            return text
          }
        },
        {
          prop: "isPublic",
          label: "公安标记",
          width: "80",
          type: "isPublic",
          callback: row => {
            let text = ""
            switch (row.isPublic) {
              case 1:
                text = "是"
                break
              case 2:
                text = "否"
                break
              default:
                text = "其他"
            }
            return text
          }
        }
      ],
      // test配置label标签
      testColumns: [
        { prop: "name", label: "姓名", width: "100" },
        { prop: "sex", label: "性别", width: "68" },
        { prop: "age", label: "年龄", width: "80" },
        { prop: "birthdata", label: "出生日期", width: "100" },
        { prop: "identityNumber", label: "身份证号", width: "180" },
        { prop: "relation", label: "与户主关系", width: "100" }
      ]
      // approvalStatuOptions: approvalStatuOptions,
      // isTestOptions: isTestOptions,
      // dialogVisible: false,
      // infoList: infoList,
      // testList: [],
      // formdata: {
      //   name: "",
      //   identityNumber: null,
      //   age: null,
      //   createDate: "",
      //   createDateOne: "",
      //   createDateTow: "",
      //   createDateThree: "",
      //   test: "",
      //   isTest: 1,
      //   approvalStatu: 1,
      //   query: "",
      //   sitoQuery: ""
      // }
    }
  },
  methods: {
    // 点击新增按钮
    addHandle() {
      console.log("点击新增了")
    },
    // 切换常用地址
    handleChange() {
      console.log("点击了")
    },
    // 点击搜索按钮
    search(formName) {
      this.$refs.searchMain.$refs[formName].validate(valid => {
        if (valid) {
          console.log(this.formData)

          // 调用接口
          this.callbackComponent()
        } else {
          console.log("error submit!!")
          return false
        }
      })
    },
    // 点击重置按钮
    reset(formName) {
      this.$refs.searchMain.$refs[formName].resetFields()
      // console.log(this.formData)
    },
    // 点击搜索后，请求后台接口了
    callbackComponent() {
      console.log("调接口")
    },
    // 家庭基本信息复选框选中
    selectChangeEvent({ checked, records }) {
      console.log(checked)
      console.log(records)
    }
    // rowClick(row) {
    //   this.testList = row.testList
    // },
    // submitForm(formName) {
    //   this.$refs[formName].validate(valid => {
    //     if (valid) {
    //       this.infoList.push(this.formdata)
    //       this.$message({
    //         message: "提交成功",
    //         type: "success"
    //       })
    //     } else {
    //       return false
    //     }
    //   })
    // }
  }
}
</script>

<style lang="scss" scoped></style>
